<template>
	<!-- 营销活动对应信息 -->
	<div class="flex_column">
		<search-section v-enter-search="() => { operate('search') }">
			<!-- 搜索查询 -->
			<div>
				<span>指标分组：</span>
				<el-select v-model="searchForm.indicatorGroupCode" clearable filterable class="my-search_input" style="width:160px"
					size="mini" placeholder="请选择指标分组">
					<el-option v-for="item in indicatorGroupList" :key="item.indicatorGroupCode" :label="item.indicatorGroupName" :value="item.indicatorGroupCode" />
				</el-select>
			</div>
			<div slot="button">
				<el-button size="mini" @click="operate('reset')">重置</el-button>
				<el-button size="mini" type="primary" @click="operate('search')">搜索</el-button>
				<el-button size="mini" type="primary" plain @click="operate('add')">添加</el-button>
			</div>
		</search-section>
		<!-- 列表信息 -->
		<div class="section main flex_1_auto flex_column shadow_border_normal">
			<el-table ref="tableRef" size="mini" :data="tableList" height="100%" stripe :row-style="{ height: '20px' }"
				:cell-style="{ padding: '0' }" border header-align="center" :header-cell-style="{
          whiteSpace: 'nowrap',
          fontSize: '12px',
          color: '#333',
          fontWeight: '700',
          background: '#f5f5f5',
        }" @header-dragend="$tableHeaderDragend(self, 'table')">
				<el-table-column type="index" label="序号" width="60" align="center" show-overflow-tooltip fixed
					:index="getIndex" />
				<el-table-column prop="indicatorGroupCode" label="指标分组编码" align="center" show-overflow-tooltip width="140" />
				<el-table-column prop="indicatorGroupName" label="指标分组名称" align="center" show-overflow-tooltip width="140" />
				<el-table-column prop="useNames" label="使用人" align="center" show-overflow-tooltip width="200" />
				<el-table-column prop="creatorName" label="创建人" align="center" show-overflow-tooltip width="120" />
				<el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip width="140" />
				<el-table-column prop="lastUpdateName" label="修改人" align="center" show-overflow-tooltip width="120" />
				<el-table-column prop="lastUpdateTime" label="修改时间" align="center" show-overflow-tooltip width="150" />
				<el-table-column prop="remark" label="指标分组描述" min-width="150"  header-align="center" show-overflow-tooltip />
				<el-table-column label="操作" width="100" align="center" fixed="right">
					<template slot-scope="{row}">
						<i class="iconfont icon_warning icon-a-xiugai" title="修改" @click="operate('edit', row)" />
						<i class="iconfont icon_error icon-a-shanchu" title="删除" @click="operate('del', row)" />
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页查询 -->
		<div class="paging">
			<el-pagination :current-page="searchForm.page" :page-sizes="$paginationSize" :page-size="searchForm.size"
				layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</div>
		<!-- 添加或编辑指标 -->
		<el-dialog :title="title == 'add' ? '添加指标配置' : '修改指标配置'" custom-class="my_dialog" :close-on-click-modal="false"
			:close-on-press-escape="false" :visible.sync="driverDialogVisible" width="450px" :before-close="handleClose">
			<div class="dialog-box">
				<el-row>
					<el-form ref="form" size="mini" :model="form" label-width="100px" label-position="right" label-suffix=" : "
						:rules="rules">
						<el-col :span="24">
							<el-form-item label="指标分组编码" prop="indicatorGroupCode">
								<el-input v-model.trim="form.indicatorGroupCode" placeholder="请输入指标分组名称" clearable class="ann_input"
									maxlength="50" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="指标分组名称" prop="indicatorGroupName">
								<el-input v-model.trim="form.indicatorGroupName" placeholder="请输入指标分组名称" clearable class="ann_input"
									maxlength="50" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="指标分组描述" prop="remark">
								<el-input v-model.trim="form.remark" type="textarea" placeholder="请输入指标分组描述" clearable
									class="ann_input" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="使用人" prop="useIds">
								<el-select v-model="form.useIds" filterable multiple reserve-keyword 
									class="ann_input" size="mini" placeholder="请选择使用人">
									<el-option v-for="item in userList" :key="item.userId" :label="item.nickName"
										:value="item.userId+''" />
								</el-select>
							</el-form-item>
						</el-col>
					</el-form>
				</el-row>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="mini" @click="handleClose">取 消</el-button>
				<el-button size="mini" type="primary" @click="dialogSure('form')">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import {
		debounce,
		throttle
	} from '@/assets/js/utils.js'
	export default {
		name:'indicatorGroup',
		data() {
			return {
				searchForm: {
					current: 1,
					size: this.$defaultPage,
					indicatorGroupCode: '', // 指标分组系统编码
				},
				userList: [], //用户列表
				indicatorGroupList: [], // 指标分组下拉框
				tableList: [], // 指标库列表
				total: 0,
				title: '',
				driverDialogVisible: false, // 编辑弹窗
				form: {
					indicatorGroupCode: '', //	指标分组编码
					indicatorGroupName: '', //	指标分组名称
					remark: '', //	指标分组描述
					useIds: [], //	使用人  
				}, // 编辑数据
				rules: {
					indicatorGroupCode: [{
						required: true,
						message: '请输入指标分组编码',
						trigger: 'blur'
					}],
					indicatorGroupName: [{
						required: true,
						message: '请输入指标分组名称',
						trigger: 'blur'
					}],
					useIds: [{
						required: true,
						message: '请选择使用人',
						trigger: 'blur'
					}],
				}
			}
		},
		activated(){
			this.$nextTick(()=>{
				 this.$refs.tableRef.doLayout()
			})
		},
		created() {
			// 获取数据
			this.getUserList()
			this.getIndicatorGroupList()
			this.getData()
		},
		methods: {
			// 获取用户列表
			getUserList(name) {
				this.$API.common.reqUserList().then((res) => {
					if (res.code == '0') {
						this.userList = res.responseBody || []
					}
				})
			},
			// 获取指标分组下拉框列表
			getIndicatorGroupList() {
				this.$API.indicatorGroup.indicatorGroupPage({}).then((res) => {
					if (res.code == '0') {
						this.indicatorGroupList = res.responseBody.records || []
					}
				})
			},
			// 搜索用户列表
			remoteUserList: debounce(function(e) {
				this.getUserList(e)
			}, 1000),

			// 获取列表数据
			async getData() {
				let res = await this.$API.indicatorGroup.indicatorGroupPage(this.searchForm)
				let {
					code,
					responseBody
				} = res
				if (code == 0) {
					this.tableList = responseBody.records || []
					this.total = Number(responseBody.total)
				}else{
					this.$message.error(res.masg)
				}
			},
			
			// 删除
			async delete(item) {
				let res = await this.$API.indicatorGroup.indicatorGroupDelete(item.code)
				if (res && res.code == 0) {
					this.$message.success('操作成功！')
					this.getData()
				}else{
					this.$message.error(res.message)
				}
			},
			// 内部方法
			async operate(type, item) {
				switch (type) {
					case 'edit': // 编辑
						this.title = 'edit'
						this.form = this.$uDeepClone(item)
						this.form.useIds = this.form.useIds.split(',')
						this.form.useIds.forEach((item) => {
							item = Number(item)
						})
						this.driverDialogVisible = true
						break
					case 'add': // 添加
						this.title = 'add'
						this.driverDialogVisible = true
						break
					case 'reset':
						// 重置
						this.searchForm = this.$options.data.call(this).searchForm
						this.getData()
						break
					case 'search':
						this.searchForm.current = 1
						this.getData()
						break
					case 'del':
						this.$confirm('是否确定删除？', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: '',
							customClass: 'my_confirm'
						}).then(() => {
							this.delete(item)
						})
						break
				}
			},

			// 添加修改确认事件
			dialogSure(formName) {
				this.$refs[formName].validate(async valid => {
					if (valid) {
						let obj = this.$uDeepClone(this.form)
						obj.useIds = obj.useIds.join()
						let res = await this.$API.indicatorGroup.indicatorGroupCreate(obj)
						if (res.code == 0) {
							this.driverDialogVisible = false
							this.$message.success('操作成功！')
							this.getData()
							this.$refs.form.resetFields()
							this.form = this.$options.data.call(this).form
						}else{
							this.$message.error(res.message)
						}

					}
				})
			},
			// 取消按钮
			handleClose() {
				this.driverDialogVisible = false
				this.resetForm('form')
			},
			// 清空数据信息
			resetForm(formName) {
				this.$refs[formName].resetFields()
				this.form = this.$options.data.call(this).form
			},
			// 分页查询
			handleSizeChange(val) {
				this.searchForm.current = 1
				this.searchForm.size = val
				this.searchOne(this.searchForm)
			},
			handleCurrentChange(val) {
				this.searchForm.current = val
				this.searchOne(this.searchForm)
			},
			getIndex(index) {
				return (
					(this.searchForm.current - 1) * this.searchForm.size + index + 1
				)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		margin-bottom: 10px;

		::v-deep th {
			height: 20px;
			padding: 1px;
		}
	}

	.dialog-box {
		padding: 10px;
		margin-top: 20px;
	}

	.ann_input {
		width: 300px;
	}
</style>